
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../css/Comment.css">
    <link rel="stylesheet" href="../css/bottom.css">
    <script src="../js/jquery-3.1.1.js"></script>
</head>
<body>
    <header>

    </header><!--header 头部-->
    <!--内容-->
    <div class="center">
    <div class="register register1">
        <h2>欢迎注册知文网账号</h2>
        <form action="register.php" class="registerForm" id="registerForm" method="post">
            <filedset>
                <p class="ming">
                    <label><b>*</b>用户名</label>
                    <input class="intext intext1" id="username" name="username"
                            type="text"/>
                    <span class="zhiwen">@zhiwen.com</span>
                    <span class="empty" id="empty1">
                        <img src="../images/错误提示.png" alt="">不能为空
                    </span>                                                                                                                                                                                      
                    <span class="cuo" id="cuo1">输入的用户姓名格式错误</span>
                </p>

                <p class="wenzi">
                    <label>&nbsp;</label>
                    <span>6-18个字符，仅支持字母</span>
                </p>
                <p class="ming">
                    <label><b>*</b>登录密码</label>
                    <input class="intext"  id="password" type="password"  name="password"/>
                    <span class="empty" id="empty2">
                        <img src="../images/错误提示.png" alt="">不能为空
                    </span>
                    <span class="cuo" id="cuo2">输入的登录格式错误</span>
                </p>
                <p class="wenzi">
                    <label>&nbsp;</label>
                    <span>6-18位字符（字母），区分大小写</span>
                </p>
                <p class="ming">
                    <label><b>*</b>确定密码</label>
                    <input class="intext" id="repassword" type="password" name="repassword"/>
                    <span class="empty" id="empty3">
                        <img src="../images/错误提示.png" alt="">不能为空
                    </span>
                    <span class="cuo" id="cuo3">密码确认错误</span>
                </p>
                <br/>
                <hr width="75%" color=#E6E6E6 SIZE=1 />
            </filedset>
            <filedset>
            <p class="ming">
                <label><b>*</b>手机号码</label>
                <input class="intext" id="number" type="text" name="num"/>
                <span class="empty" id="empty4">
                    <img src="../images/错误提示.png" alt="">不能为空
                </span>
                <span class="cuo" id="cuo4">输入的手机号格式错误</span>
            </p>
            <p class="ming">
                <label>&nbsp;</label>
                <span id="message" style="color: #CF4141;font-weight: bold;">
                        请使用您填写的手机号，发送验证码至10690443211185
                </span>
            </p>
            <p class="ming">
                <label><b>*</b>验证码</label>
                <span id="security" class="security"></span>
                <input  id="keysPhone" name="keys" value="ZC0287">
                <i class="errorClass2" id="errorValidator"></i>
            </p>
            <br>
            <hr width="75%" color=#E6E6E6 SIZE=1 />
            <p class="ming">
                <label>&nbsp;</label>
                <input  class="checkbox" id="argee" type="checkbox"checked="true"/>
                我已阅读并接受“<a target="_blank" href=""
                           style="text-decoration: underline;color:#47aa01;">服务条款</a>”
            </p>
            <p class="ming ming1">
                <label>&nbsp;</label>
                <button class="submit" id="submit" type="submit" >
                    <a>立即注册</a>
                     <!-- href="login.html"  -->
                </button>
            </p>
            </filedset>
        </form>
        <p class="bottom"></p>
    </div>
    </div>
    <div id="Bottom_bottom">

    </div>
    <!--用户交互-->
    <script>
//验证是否为空    验证输入的内容是否合法
    $(function () {
         $('header').load('header.php');
    $('#Bottom_bottom').load('bottom.html');
        var username = $('#username');
        var isValid = true;//是否合法
        username.blur(function () {
            //var reg=/^[\u4e00-\u9fa5]{6,18}$/;
            var reg1=/^[a-zA-Z\/]{6,18}$/;
            if(username.val()==''||username.val()==null){
                $('#empty1').css('display','block');
                $('#cuo1').css('display','none');
                isValid=false;
            }else if(!reg1.test(username.val())){
                $('#empty1').css('display','none');
                $('#cuo1').css('display','block');    
                isValid=false;       
            }else{
                // username.html();
                $('#empty1').css('display','none');
                $('#cuo1').css('display','none');  
            }
        });

        var password = $('#password');
        password.blur(function () {
            var reg =/^[a-zA-Z\/]{6,18}$/;
            if(password.val()==''||password.val()==null){
                $('#empty2').css('display','block');
                $('#cuo2').css('display','none');
                isValid=false;
            }else if(!reg.test(password.val())){
                $('#empty2').css('display','none');
                $('#cuo2').css('display','block');
                isValid=false;
            }else{
                $('#empty2').css('display','none');
                $('#cuo2').css('display','none');  
            }
        });

        var repassword = $('#repassword');
        repassword.blur(function () {
            if(repassword.val()==''||repassword.val()==null){
                $('#empty3').css('display','block');
                $('#cuo3').css('display','none');
                isValid=false;
            }else if(password.val()!=repassword.val()){
                $('#empty3').css('display','none');
                $('#cuo3').css('display','block');
                isValid=false;
            }else{
                $('#empty3').css('display','none');
                $('#cuo3').css('display','none');  
            }
        });

        var number = $('#number');
        number.blur(function () {
            var reg = /^1[34578]{1}\d{9}$/;
            if(number.val()==''||number.val()==null){
                $('#empty4').css('display','block');
                $('#cuo4').css('display','none');
                isValid=false;
            }else if(!reg.test(number.val())){
                $('#empty4').css('display','none');
                $('#cuo4').css('display','block');
                isValid=false;
            }else{
                $('#empty4').css('display','none');
                $('#cuo4').css('display','none');  
            }
        });


        $('#registerForm').on('submit',function (e) {
            if (!isValid) {
                e.preventDefault();
                return false;
            }           
        })

    })//$
    </script>




</body>
</html>